<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/tt.css">
    <link rel="stylesheet" type="text/css" href="./plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/yui/cssgrids-min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui.min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui-append.min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/widget-base.css" />
    <link rel="stylesheet" type="text/css" href="./css/widget-head-foot.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/page-sj-spit-index.css" />

    <title>自我测试</title>
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="./js/axios-0.18.0.js" type="text/javascript"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>

<div id="app">
    <div style="height:100px;background-color:black;color:white;text-align:center;font-size:35px">
        开&nbsp;&nbsp;&nbsp; 始&nbsp;&nbsp;&nbsp; 答&nbsp;&nbsp;&nbsp; 题
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <div class="wrapper tag-item">
        <div class="fl left-list">
            <div class="tc-data-list">
                <div class="tc-list">
                    <ul class="detail-list" v-for=" question in questions">
                        <li class="qa-item">
                            <div class="fl record">
                                <div class="number">
                                    <div class="border answer">
                                        <p class="usenum"></p>
                                        <p class="zannum"><strong> 题干</strong> </p>
                                    </div>
                                    <hr/>
                                    <div class="border answer">
                                        <p class="zannum"><strong> 选项</strong> </p>
                                    </div>
                                </div>
                            </div>
                            <div class="info">
                                <p class="text">
                                    <b>{{question.subject}}</b>
                                </p>
                                <div class="other">
                                    <div class="fl date">
                                        <span>
                                            <el-form-item label="多选题"  v-if="question.type == 2">
                                                 <el-checkbox  v-for="(item,index) in question.questionItemList"
                                                               :label="item.content"
                                                               :key="item.id"
                                                               :name="question.id"
                                                               @change="changeResult(item)">
                                                      {{item.content}}
                                                 </el-checkbox>
                                            </el-form-item>
                                            <el-form-item label="单选题"  v-if="question.type == 1">
                                                <el-radio-group v-model="question.id">
                                                    <el-radio v-for="(item,index) in question.questionItemList"
                                                              :label="item.content"
                                                              :key="item.id"
                                                              :name="question.id"
                                                              @change="changeResult(item)">
                                                        {{item.content}}
                                                    </el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                    </ul>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">交卷</el-button>
                    </el-form-item>
                </div>
            </div>
        </div>
    </div>
    </el-form>
</div>

<script>
    /* 脚本中创建对象,处理业务 */
    new Vue({
        el: '#app',
        data: {
            questions:[],
            results:[],
        },
        methods: {
            changeResult(item){
                //输出选中信息（用于测试）
                //alert(item.id+","+item.isRight+","+item.questionId);
                //定义json格式内容
                var temp = {'questionId':item.questionId,'answerResult':item.isRight,'rightAnswer':item.id}
                //判断是否填充过
                this.results = this.results.filter((e=>{return e.questionId !== item.questionId}))
                //填充到results中
                this.results.push(temp);
            },
            submitForm(formName) {
                if(this.results.length != this.questions.length){
                    alert("请检查题目是否全部选择");
                    return;
                }else{
                    if(window.confirm("确定交卷吗？")) {
                        //alert('submit!');
                        //把json数据转成字符串
                        let str = JSON.stringify(this.results);
                        //alert("数据是：" + str);
                        //获取localSotrage
                        let storage = window.localStorage;
                        //发送请求，交卷
                        axios.post('/exam/applyExaminationPaper', '{"memberId":"'+storage.loginInfo+'","results":'+str+'}').then(function (response) {
                            //输出提示信息
                            alert(response.data.message);
                            //发送完请求，跳转到交卷成功页面
                            window.open('/success.html', '_self');
                        }).catch(function (err) {
                            console.log(err)
                        });
                    }
                }
            },
            findQuestion(){
                //1.获取localStorage
                let storage = window.localStorage;
                //2.发送post请求，得到集合
                //alert(storage.loginInfo);
                //3.判断是否有认证信息
                if(storage.loginInfo ==  undefined){
                    //没有认证信息，前往主页面
                    window.open('/index.html','_self');
                }else{
                    //3.定义this对象
                    let _this = this;
                    //4.发送post请求，获取题目信息
                    axios.post('/exam/generateExaminationPaper').then(function (response) {
                        //5.得到响应数据
                        var res = response.data;
                        //alert(JSON.stringify(res));
                        //6.给成员赋值
                        _this.questions = res.data;
                        //alert(_this.questions);
                    }).catch(function (err) {
                        console.log(err)
                    });
                }


            }
        },
        created(){
            this.findQuestion();
        }

    });
</script>



</body>

</html>